<template>
  <div>
    <Drawer :closable="false" width="1000" class-name="order_box" v-model="modals" :styles="{ padding: 0 }">
      <div v-if="orderDatalist">
        <div class="head">
          <div class="full">
            <Icon custom="iconfont icondingdan" size="60"/>
            <div class="text">
              <div class="title">积分订单</div>
              <div>订单编号：{{ orderDatalist.orderInfo.order_id }}</div>
            </div>
            <div>
              <Button :class="openErp?'on':''" :disabled="openErp" v-if="orderData.status === 1" @click="sendOrder">发送货</Button>
              <Button :class="openErp?'on':''" :disabled="openErp" v-if="orderData.status === 2" @click="delivery">配送信息</Button>
              <Button v-if="orderData.status >= 1" @click="changeMenu('10')">小票打印</Button>
              <Button :class="openErp?'on':''" :disabled="openErp" v-if="orderData.status >= 1 && orderData.express_dump" @click="changeMenu('11')">电子面单打印</Button>
              <Button :class="openErp?'on':''" :disabled="openErp" v-if="orderData.is_del == 1" @click="changeMenu('9')">删除订单</Button>
              <Dropdown @on-click="changeMenu" v-if="orderData.status !== 4">
                <Button icon="ios-more"></Button>
                <DropdownMenu slot="list">
                  <DropdownItem v-if="orderData.status !== 4" name="4">订单备注</DropdownItem>
                  <DropdownItem :disabled="openErp" v-if="orderData.status === 2" name="8">已收货</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </div>
          </div>
          <ul class="list">
            <li class="item">
              <div class="title">订单状态</div>
              <div class="value1">{{orderDatalist.orderInfo.status_name || '-'}}</div>
            </li>
            <li class="item">
              <div class="title">兑换积分</div>
              <div>{{ orderDatalist.orderInfo.integral || '-'}}</div>
            </li>
            <li class="item">
              <div class="title">兑换金额</div>
              <div>{{ orderDatalist.orderInfo.price || '-'}}</div>
            </li>
            <!-- <li class="item">
                <div class="title">支付方式</div>
                <div>{{ orderDatalist.orderInfo._status._payType }}</div>
            </li> -->
            <li class="item">
              <div class="title">兑换时间</div>
              <div>{{ orderDatalist.orderInfo.add_time || '-' }}</div>
            </li>
          </ul>
        </div>
        <Tabs v-model="activeName">
          <TabPane label="订单信息" name="detail">
            <div class="section">
              <div class="title">用户信息</div>
              <ul class="list">
                <li class="item">
                  <div>用户昵称：</div>
                  <div class="value">{{orderDatalist.userInfo.uid?orderDatalist.userInfo.nickname:'游客'}}</div>
                </li>
                <li class="item">
                  <div>绑定电话：</div>
                  <div class="value">{{ orderDatalist.userInfo.phone || '-'}}</div>
                </li>
              </ul>
            </div>
            <div class="section">
              <div class="title">收货信息</div>
              <ul class="list">
                <!-- <li class="item">
                    <div>用户昵称：</div>
                    <div class="value">{{orderDatalist.userInfo.uid?orderDatalist.userInfo.nickname:'游客'}}</div>
                </li> -->
                <li class="item">
                  <div>收货人：</div>
                  <div class="value">{{ orderDatalist.orderInfo.real_name || '-'}}</div>
                </li>
                <li class="item">
                  <div>收货电话：</div>
                  <div class="value">{{ orderDatalist.orderInfo.user_phone || '-'}}</div>
                </li>
                <li class="item">
                  <div>收货地址：</div>
                  <div class="value">{{ orderDatalist.orderInfo.user_address || '-'}}</div>
                </li>
              </ul>
            </div>
            <div class="section" v-if="orderDatalist.orderInfo.fictitious_content && orderDatalist.orderInfo.product_type !=1">
              <div class="title">虚拟发货</div>
              <ul class="list">
                <li class="item">
                  <div class="value">{{ orderDatalist.orderInfo.fictitious_content }}</div>
                </li>
              </ul>
            </div>
            <div class="section" v-if="orderDatalist.orderInfo.product_type ==1">
              <div class="title">卡密发货</div>
              <div v-if='orderDatalist.orderInfo.virtual.length'>
                <div class="list" v-for="(item,index) in orderDatalist.orderInfo.virtual" :key='index'>
                  <div class="item">
                    <div>卡号{{index+1}}：</div>
                    <div class="value">{{item.card_no}}</div>
                  </div>
                  <div class="item">
                    <div>密码{{index+1}}：</div>
                    <div class="value">{{item.card_pwd}}</div>
                  </div>
                </div>
              </div>
              <ul class="list" v-else>
                <li class="item">
                  <div class="value">{{ orderDatalist.orderInfo.virtual_info || '-'}}</div>
                </li>
              </ul>
            </div>
            <div class="section">
              <div class="title">订单信息</div>
              <ul class="list">
                <li class="item">
                  <div>创建时间：</div>
                  <div class="value">{{ orderDatalist.orderInfo._add_time || '-'}}</div>
                </li>
                <li class="item">
                  <div>商品总数：</div>
                  <div class="value">{{ orderDatalist.orderInfo.total_num || '-'}}</div>
                </li>
                <li class="item">
                  <div>商品兑换积分：</div>
                  <div class="value">{{ orderDatalist.orderInfo.total_integral || '-'}}</div>
                </li>
                <li class="item">
                  <div>商品兑换金额：</div>
                  <div class="value">{{ orderDatalist.orderInfo.total_price || '-'}}</div>
                </li>
              </ul>
            </div>
            <div class="section" v-if="orderDatalist.orderInfo.delivery_type==='express'">
              <div class="title">物流信息</div>
              <ul class="list">
                <li class="item">
                  <div>快递公司：</div>
                  <div class="value">{{orderDatalist.orderInfo.delivery_name || '-'}}</div>
                </li>
                <li class="item">
                  <div>快递单号：</div>
                  <div class="value">{{orderDatalist.orderInfo.delivery_id}}<span class="logisticsLook" @click="openLogistics">查询</span></div>
                </li>
              </ul>
            </div>
            <div class="section" v-if="orderDatalist.orderInfo.delivery_type==='send'">
              <div class="title">配送信息</div>
              <ul class="list">
                <li class="item">
                  <div>送货人姓名：</div>
                  <div class="value">{{orderDatalist.orderInfo.delivery_name || '-'}}</div>
                </li>
                <li class="item">
                  <div>送货人电话：</div>
                  <div class="value">{{orderDatalist.orderInfo.delivery_id || '-'}}</div>
                </li>
              </ul>
            </div>
            <div v-if="orderDatalist.orderInfo.custom_form.length" class="section">
				<div class="title">自定义留言</div>
				<ul class="list">
				    <li v-for="(item, index) in orderDatalist.orderInfo.custom_form" :key="index" class="item" v-if="(item.value && ['uploadPicture','dateranges'].indexOf(item.name) == -1) || (item.value.length && ['uploadPicture','dateranges'].indexOf(item.name) != -1)">
				        <div class="txtVal">{{ item.titleConfig.value }}：</div>
				    <div v-if="item.name == 'dateranges'" class="value">{{item.value[0]+'/'+item.value[1]}}</div>
				        <div v-else-if="item.name === 'uploadPicture'" class="value">
				            <div v-for="(img, i) in item.value" :key="i" class="image" v-viewer>
				                <img v-lazy="img">
				            </div>
				        </div>
				        <div v-else class="value">{{ item.value || '-' }}</div>
				    </li>
				</ul>
			</div>
            <div class="section" v-if="orderDatalist.orderInfo.mark">
              <div class="title">买家留言</div>
              <ul class="list">
                <li class="item">
                  <div class="value">{{orderDatalist.orderInfo.mark}}</div>
                </li>
              </ul>
            </div>
            <div class="section" v-if="orderDatalist.orderInfo.remark">
              <div class="title">订单备注</div>
              <ul class="list">
                <li class="item">
                  <div>备注：</div>
                  <div class="value">{{ orderDatalist.orderInfo.remark || '-' }}</div>
                </li>
              </ul>
            </div>
          </TabPane>
          <TabPane label="商品信息" name="product">
            <Table :columns="columns1" :data="orderDatalist.orderInfo.cart_info" border highlight-row>
              <template slot-scope="{ row }" slot="product">
                <div class="product">
                  <div class="image" v-viewer>
                    <img v-lazy="row.attrInfo ? row.attrInfo.image : row.image">
                  </div>
                  <div class="title">{{ row.title }} | {{ row.attrInfo ? row.attrInfo.suk : '' }}</div>
                </div>
              </template>
              <template slot-scope="{ row }" slot="price">
                <div>{{row.attrInfo?row.attrInfo.price:row.price}}</div>
              </template>
              <template slot-scope="{ row }" slot="integral">
                <div>{{row.attrInfo?row.attrInfo.integral:row.integral}}</div>
              </template>
            </Table>
          </TabPane>
          <TabPane label="订单记录" name="record">
            <Table :columns="columns2" :data="recordData" border :loading="loading" no-data-text="暂无数据" highlight-row   no-filtered-data-text="暂无筛选结果"></Table>
          </TabPane>
        </Tabs>
      </div>
    </Drawer>
    <Modal v-model="modal2" scrollable title="物流查询"  width="350" class="order_box2">
      <div class="logistics acea-row row-top" v-if="orderDatalist">
        <div class="logistics_img"><img src="../../../../assets/images/expressi.jpg"></div>
        <div class="logistics_cent">
          <span>物流公司：{{orderDatalist.orderInfo.delivery_name}}</span>
          <span>物流单号：{{orderDatalist.orderInfo.delivery_id}}</span>
        </div>
      </div>
      <div class="acea-row row-column-around trees-coadd">
        <div class="scollhide">
          <Timeline>
            <TimelineItem v-for="(item,i) in result" :key="i">
              <p class="time" v-text="item.time"></p>
              <p class="content" v-text="item.status"></p>
            </TimelineItem>
          </Timeline>
        </div>
      </div>
    </Modal>
  </div>
</template>
<!-- <template>
    <div  v-if="orderDatalist">
        <Modal v-model="modals"  scrollable title="订单信息" width="700" class="order_box" footer-hide>
            <Card :bordered="false" dis-hover class="i-table-no-border">
              <div class="ivu-description-list-title">收货信息</div>
              <Row class="mb10">
                <Col span="12">用户昵称：{{orderDatalist.userInfo.nickname}}</Col>
                <Col span="12">收货人：{{orderDatalist.orderInfo.real_name}}</Col>
              </Row>
              <Row class="mb10">
                <Col span="12">联系电话：{{orderDatalist.orderInfo.user_phone}}</Col>
                <Col span="12">收货地址：{{orderDatalist.orderInfo.user_address}}</Col>
              </Row>
              <Divider style="margin: 20px 0 !important;"/>
              <div class="ivu-description-list-title">订单信息</div>
              <Row class="mb10">
                <Col span="12">订单ID：{{orderDatalist.orderInfo.order_id}}</Col>
                <Col span="12" class="fontColor1">订单状态：{{orderDatalist.orderInfo.status_name}}</Col>
              </Row>
              <Row class="mb10">
                <Col span="12">商品名称：{{ orderDatalist.orderInfo.store_name + " | "}}{{orderDatalist.orderInfo.suk ? orderDatalist.orderInfo.suk : ""}}</Col>
              </Row>
              <Row class="mb10">
                <Col span="12">商品总数：{{orderDatalist.orderInfo.total_num}}</Col>
                <Col span="12">商品总积分：{{orderDatalist.orderInfo.total_price}}</Col>
              </Row>
              <Row class="mb10">
                <Col span="12" class="mb10">创建时间：{{orderDatalist.orderInfo.add_time}}</Col>
                <Col span="12" class="mb10" v-if="orderDatalist.orderInfo.remark">商家备注：{{orderDatalist.orderInfo.remark}}</Col>
                <Col span="12" class="mb10" v-if="orderDatalist.orderInfo.fictitious_content">虚拟发货备注：{{orderDatalist.orderInfo.fictitious_content}}</Col>
              </Row>
              <div v-if="orderDatalist.orderInfo.delivery_type==='express'">
                <Divider style="margin: 20px 0 !important;"/>
                <div class="ivu-description-list-title">物流信息</div>
                <Row class="mb10">
                  <Col span="12">快递公司：{{orderDatalist.orderInfo.delivery_name}}</Col>
                  <Col span="12">快递单号：{{orderDatalist.orderInfo.delivery_id}} <Button type="info" size="small" @click="openLogistics">物流查询</Button></Col>
                </Row>
              </div>
              <div v-if="orderDatalist.orderInfo.delivery_type==='send'">
                <Divider style="margin: 20px 0 !important;"/>
                <div class="ivu-description-list-title">配送信息</div>
                <Row class="mb10">
                  <Col span="12">送货人姓名：{{orderDatalist.orderInfo.delivery_name}}</Col>
                  <Col span="12">送货人电话：{{orderDatalist.orderInfo.delivery_id}}</Col>
                </Row>
              </div>
              <div v-if="orderDatalist.orderInfo.mark">
                <Divider style="margin: 20px 0 !important;" v-if="orderDatalist.orderInfo.mark"/>
                <div class="ivu-description-list-title" v-if="orderDatalist.orderInfo.mark">备注信息</div>
                <Row class="mb10">
                  <Col span="12" class="fontColor2">{{orderDatalist.orderInfo.mark}}</Col>
                </Row>
              </div>
            </Card>
        </Modal>
        <Modal v-model="modal2" scrollable title="物流查询"  width="350" class="order_box2">
            <div class="logistics acea-row row-top">
                <div class="logistics_img"><img src="../../../../assets/images/expressi.jpg"></div>
                <div class="logistics_cent">
                    <span>物流公司：{{orderDatalist.orderInfo.delivery_name}}</span>
                    <span>物流单号：{{orderDatalist.orderInfo.delivery_id}}</span>
                </div>
            </div>
            <div class="acea-row row-column-around trees-coadd">
                <div class="scollhide">
                    <Timeline>
                        <TimelineItem v-for="(item,i) in result" :key="i">
                            <p class="time" v-text="item.time"></p>
                            <p class="content" v-text="item.status"></p>
                        </TimelineItem>
                    </Timeline>
                </div>
            </div>
        </Modal>
    </div>
</template> -->

<script>
import { getExpress, getIntegralOrderRecord } from '@/api/marketing';
export default {
  name: 'orderDetails',
  data () {
    return {
      modal2: false,
      modals: false,
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      result: [],
      columns1: [
        {
          title: '商品信息',
          slot: 'product',
          align: 'center',
          minWidth: 400
        },
        {
          title: '积分兑换',
          slot: 'integral',
          align: 'center'
        },
        {
          title: '金额兑换',
          slot: 'price',
          align: 'center'
        },
        {
          title: '数量',
          key: 'cart_num',
          align: 'center'
        },
        {
          title: '小计',
          align: 'center',
          render: (h, params) => {
            return h('div', (params.row.attrInfo?params.row.attrInfo.integral:params.row.integral) * params.row.cart_num + '积分+￥' + (params.row.attrInfo?params.row.attrInfo.price:params.row.price) * params.row.cart_num);
          }
        }
      ],
      columns2: [
        {
          title: '订单ID',
          key: 'oid',
          align: 'center',
          minWidth: 40
        },
        {
          title: '操作记录',
          key: 'change_message',
          align: 'center',
          minWidth: 280
        },
        {
          title: '操作时间',
          key: 'change_time',
          align: 'center',
          minWidth: 100
        }
      ],
      recordData: [],
      activeName:'detail',
      orderData:{}
    }
  },
  props: {
    orderDatalist: Object,
    orderId: Number,
    rowActive: Object,
    openErp:{
      type:Boolean,
      default:false,
    }
  },
  watch: {
    orderDatalist (value) {
      this.orderData = value.orderInfo;
      this.getList(value.orderInfo.id);
    }
  },
  methods: {
    openLogistics () {
      this.getOrderData()
      this.modal2 = true;
    },
    // 获取订单物流信息
    getOrderData () {
      getExpress(this.orderId).then(async res => {
        this.result = res.data.result;
      }).catch(res => {
        this.$Message.error(res.msg);
      })
    },
    getList (id) {
      let data = {
        id: id,
        datas: this.page
      }
      this.loading = true;
      getIntegralOrderRecord(data).then(async res => {
        this.recordData = res.data;
        this.loading = false;
      }).catch(res => {
        this.loading = false;
        this.$Message.error(res.msg);
      })
    },
    changeMenu (value) {
      this.$parent.changeMenu(this.rowActive, value);
    },
    sendOrder () {
      this.$parent.sendOrder(this.rowActive);
    },
    delivery () {
      this.$parent.delivery(this.rowActive);
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="stylus">
.order_box .section .item .txtVal{
  max-width 100px;
}
.order_box .head .full .ivu-btn.on{
  color: #c5c8ce!important;
  background-color: #f7f7f7!important;
  border-color: #dcdee2!important;
}
.ivu-description-list-title {
  margin-bottom: 16px;
  color: #17233d;
  font-weight: 500;
  font-size: 14px;
}
.logisticsLook{
  font-size 13px;
  margin-left 10px;
  color #1890FF;
  cursor pointer;
}
.value{
  word-break:break-all
}
/deep/.ivu-icon-ios-more {
  font-size 20px;
}
.logistics
  align-items: center
  padding: 10px 0px
  .logistics_img
    width 45px
    height 45px
    margin-right: 12px
    img
      width 100%
      height 100%
  .logistics_cent
    span
      display block
      font-size 12px
.trees-coadd
  width: 100%;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  .scollhide
    width: 100%;
    height: 100%;
    overflow: auto;
    margin-left: 18px;
    padding: 10px 0 10px 0;
    box-sizing: border-box;
    .content
      font-size 12px
    .time
      font-size 12px
      color: #2d8cf0
.order_box2
  position absolute
  z-index 999999999
.order_box >>> .ivu-modal-header
  padding 30x 16px !important
.order_box >>> .ivu-card
  font-size 12px !important
.fontColor1 >>> .ivu-description-term
  color red !important
.fontColor1 >>> .ivu-description-detail
  color red !important
  padding-bottom 14px !important
.fontColor2 >>> .ivu-description-detail
  color #733AF9 !important
.order_box >>> .ivu-description-term
  padding-bottom 10px !important
.order_box >>> .ivu-description-detail
  padding-bottom 10px !important
.order_box >>> .ivu-modal-body
  padding: 0 !important
.fontColor3 >>> .ivu-description-term
  color #f1a417 !important
.fontColor3 >>> .ivu-description-detail
  color #f1a417 !important

.tabBoxPic
  width 50px
  height 50px
  display inline-block
  vertical-align top
  margin-right 6px
.tabBox_img
  width 100%
  height 100%
  border-radius:4px
  cursor pointer
  img
    width 100%
    height 100%
    padding 2px

>>> .order_box

  .head
    padding 30px 35px 25px

    .full
      display flex

      .iconfont
        color #1890FF

        &.sale-after {
          color #90ADD5
        }

      .text
        align-self center
        flex 1
        min-width 0
        padding-left 12px
        border 0
        font-size 13px
        line-height 13px
        color #606266

        .title
          margin-bottom 10px
          font-weight 500
          font-size 16px
          line-height 16px
          color rgba(0, 0, 0, 0.85)

      .ivu-btn
        margin-left 12px

        &:first-child
          display inline-block
          border-color #1890FF
          margin-left 0
          background-color #1890FF
          color #FFFFFF

        &:nth-child(2)
          display inline-block
          border-color #19BE6B
          background-color #19BE6B
          color #FFFFFF

        &:nth-child(3)
          display inline-block

        &:focus
          box-shadow none

      .ivu-dropdown
        margin-left 12px

        &:nth-child(n+5)
          display inline-block

        .ivu-btn
          border-color #DCDEE2
          background-color #FFFFFF
          color #515A6E

    .list
      display flex
      margin-top 20px
      overflow hidden
      list-style none

      .item
        flex none
        width 200px
        font-size 14px
        line-height 14px
        color rgba(0, 0, 0, 0.85)

        .title
          margin-bottom 12px
          font-size 13px
          line-height 13px
          color #666666

        .value1
          color #F56022

        .value2
          color #1BBE6B

        .value3
          color #1890FF

        .value4
          color #6A7B9D

        .value5
          color #F5222D

  .section
    padding 25px 0
    border-bottom 1px dashed #EEEEEE

    .title
      padding-left 10px
      border-left 3px solid #1890FF
      font-size 15px
      line-height 15px
      color #303133

    .list
      display flex
      flex-wrap wrap
      list-style none

    .item
      flex 0 0 calc(100% / 3)
      display flex
      margin-top 16px
      font-size 13px
color #606266

  &:nth-child(3n+1)
    padding-right 20px

  &:nth-child(3n+2)
    padding-right 10px
    padding-left 10px

  &:nth-child(3n+3)
    padding-left 20px

.value
  flex 1

  .image
    display inline-block
    width 40px
    height 40px
    margin 0 12px 12px 0
    vertical-align middle

  img
    width 100%
    height 100%

.product
  display flex

  .image
    width 50px
    height 50px

  img
    width 100%
    height 100%
    border-radius 4px

  .title
    flex 1
    padding-left 13px
    text-align left

>>> .ivu-tabs
  color rgba(0, 0, 0, 0.85)

  .ivu-tabs-bar
    border-bottom 0
    margin-bottom 0
    background-color #F5F7FA

  .ivu-tabs-nav-container
    font-size 13px

  .ivu-tabs-nav-wrap
    margin-bottom 0

  .ivu-tabs-ink-bar
    display none

  .ivu-tabs-tab
    padding 7px 19px
    margin-right 0
    line-height 26px

  .ivu-tabs-tab-active
    background-color #FFFFFF
    color rgba(0, 0, 0, 0.85)

    &::before
      content ""
      position absolute
      top 0
      left 0
      width 100%
      height 2px
      background-color #1890FF

  .ivu-tabs-tabpane
    padding 25px 35px

    &:first-child
      padding 0 35px

>>> .ivu-table

  .ivu-table-header

    table
      border-top 0 !important

    th
      background-color #F7F7F7 !important
</style>
